<template>
	<view class="wrap" v-if="product">
		<view class="produce-header">
			<image :src="product.cover" mode=""></image>
			<text class="product-name">{{product.name}} {{product.lockDays}}天</text>
		</view>
		<view class="product">
			<view class="header">
				<view class="left">
					<view class="">
						<text class="amount">{{(product.limitMoney[0].interest * 100).toFixed(2)}}</text>
						<text class="unit">%</text>
					</view>
					<text>日化率</text>
				</view>
				<view class="right">
					<text class="product-title">历史年年正收益</text>
					<text class="note">每日返息，到期还本</text>
				</view>
			</view>
			<text class="desc">{{product.description}}</text>
			<!-- <view class="tips" v-if="product.limitNumber">
				<text>限量{{product.limitNumber.sumLimitNumber}}份</text>
				<text class="line"></text>
				<text>每份{{product.limitNumber.amount}}U限购{{product.limitNumber.userLimitNumber}}份</text>
			</view> -->
			<view class="tips">
				<text>限量{{product.limitMoney[0].sumLimitMoney}}U</text>
				<text class="line"></text>
				<text>限购{{product.limitMoney[0].maxAmount}}U</text>
			</view>
			<view class="pic-box">
				<image :src="product.picture" mode="widthFix"></image>
			</view>
		</view>


		<view class="model-product" style="padding-top: 38rpx;">
			<text class="footer-text">产品流程</text>
			<image src="../../static/procress.png" class="procress" mode=""></image>
			<view class="procress-text">
				<text>买入理财</text>
				<text>每天返利</text>
				<text>返还本金</text>
			</view>

			<text class="title">理财须知</text>
			<text class="xiyi">

				一、投资期限<br>

				定期理财产品的投资期限根据产品类型和市场需求设定，一般分为短期、中期和长期。短期产品通常在1-3个月，中期产品在3-12个月，长期产品在1-3年。投资者可以根据自己的资金需求和风险承受能力选择合适的投资期限。

				<br>二、收益率<br>

				定期理财产品的收益率根据市场利率、产品风险等级、投资期限等因素确定。一般来说，风险较高的产品收益率也相对较高，反之亦然。此外，短期产品的收益率通常低于长期产品。投资者可以根据自己的收益需求选择合适的产品。

				<br>三、起投金额<br>

				不同期限的定期理财产品起投金额也不同，短期的起投金额通常较低，而长期的起投金额则相对较高。投资者应根据自己的资金规模和财务状况选择适合自己的起投金额。

				<br>四、赎回规则<br>

				定期理财产品的赎回规则根据产品类型和投资期限设定。短期产品通常在到期后一次性赎回，而长期产品则可能提供分期赎回或提前赎回选项。投资者应了解产品的赎回规则，以便在需要时能够及时赎回资金。

				<br>五、风险等级<br>

				定期理财产品的风险等级根据产品的投资方向、风险控制措施等因素确定。通常，低风险产品的收益率相对较低，而高风险产品的收益率则较高。投资者应根据自己的风险承受能力选择合适的产品。

				<br>六、投资方向<br>

				定期理财产品的投资方向可能涵盖股票、债券、货币市场等。投资者应了解产品的投资方向，以便评估产品的风险和收益潜力。</text>

		</view>
	</view>
	<view style="height: 185rpx;background: #F6F7F9;"></view>
	<view class="settlement">

		<view class="pay" v-if="productDAO">

			<view class="service" @click="bindService">
				<image src="../../static/service-black.png" mode=""></image>
			</view>
			<button class="btn" @click="goPay1">立即购买</button>
		</view>
	</view>
	<view class="model-fix" v-if="PageState">
		<view class="content">
			<view class="top">
				<image src="../../static/pay-close.jpg" @click="PageState = false" class="pay-close" mode=""></image>
			</view>
			<view class="model-product" v-if="productDAO&&product.limitMoney">
				<text class="title">买入金额</text>
				<view class="price">
					<input type="digit" class="inp" placeholder-class="phl" @input="setAmountPage"
						v-model="productDAO.amount" placeholder="请输入买入金额" />
					<text>USDT</text>
				</view>

				<view class="footer">
					<image src="../../static/oh.png" mode=""></image>
					<text>该产品当前持仓金额{{product.userTotalInvestAmount}}U 最少买入{{product.limitMoney[0].currentLimitMoney}}U</text>
				</view>
			</view>
			<view class="sum-amount" v-if="product">
				<text>总计：</text>

				<text style="font-size: 46rpx;font-weight: bold;margin:0 14rpx">{{productDAO.amount || 0}}</text>
				<text>USDT</text>
			</view>
			<view class="xy" @click="isState = !isState">
				<image :src="isState?'/static/radio-act.png':'/static/radio.png'" mode=""></image>
				<text>点击立即购买代表您熟悉</text>

				<text style="color:#316BFF ;" @click="toWEB">投资人权益须知</text>
			</view>
			<button class="btn2" @click="goPay">确认</button>
		</view>
	</view>
	<uni-pay ref="pay" :amount="amountPage" @bindPassWord="confirm"></uni-pay>
</template>

<script setup>
	import {
		userProductInvest,
		productGet,
		user
	} from '@/util/api.js'
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const product = ref()
	const isState = ref(true)
	const pay = ref()
	const PageState = ref(false)
	const productDAO = ref({
		"amount": '',
		"number": 1,
		"productId": 0,
		"transactionPassword": "",
		"productLimitId":""
	})
	const userData = ref()
	const amountPage = ref()
	onLoad((params) => {
		getData(params.id,params.pid)
		getUser()
	})
	// 获取当前登录用户信息
	const getUser = async () => {
		const result = await user()
		console.log(result)
		if (result.code == 200) {
			userData.value = result.data
		} else {
			userData.value = null
		}
	}
	const toWEB = () => {
		uni.navigateTo({
			url: "/pages/xuzhi/xuzhi"
		})
	}
	const bindService = () => {
		uni.navigateTo({
			url: "/pages/webViewService/webViewService"
		})
	}
	// 设置金额
	const setAmountPage = (e) => {

		amountPage.value = e.detail.value
	}
	const getData = async (id,pid) => {
		const result = await productGet({id:pid,sid:id})
		product.value = result.data
		if (product.value.limitNumber) {
			amountPage.value = product.value.limitNumber.amount
			productDAO.value = {
				"amount": product.value.limitNumber.amount,
				"number": 1,
				"productId": product.value.id
			}
		} else {
			productDAO.value = {
				"amount": '',
				"number": 1,
				"productId": product.value.id,
				"productLimitId":product.value.limitMoney[0].id
			}
		}


	}

	// 增加份数
	const bindPlus = () => {

		if (productDAO.value.number < product.value.limitNumber.userLimitNumber) {
			productDAO.value.number++
			amountPage.value = productDAO.value.number * product.value.limitNumber.amount
		}

	}
	// 减少份数
	const bindClear = () => {
		if (productDAO.value.number > 1) {
			productDAO.value.number--
			amountPage.value = productDAO.value.number * product.value.limitNumber.amount
		}
	}
	const goPay1 = () => {
		PageState.value = true
	}
	// 立即购买
	const goPay = async () => {

		if (!userData.value) {
			uni.showModal({
				title: "提示",
				content: "需要登录",
				success: (ret) => {
					if (ret.confirm) {
						uni.navigateTo({
							url: "/pages/loginForCode/loginForCode"
						})
					}
				}
			})
			return false
		}
		if (isState.value == false) {
			uni.showModal({
				title: "提示",
				content: "请同意投资人权益须知",
				showCancel: false
			})
			return false;
		}

		if (product.value.limitNumber) {
			if (!amountPage.value) {
				uni.showModal({
					title: "提示",
					content: "请输入买入金额",
					showCancel: false
				})
				return false;
			}
		}
		if (product.value.limitMoney) {
			if (!productDAO.value.amount) {
				uni.showModal({
					title: "提示",
					content: "请输入买入金额",
					showCancel: false
				})
				return false;
			}
		}


		pay.value.show()

	}
	const confirm = async (e) => {
		productDAO.value.transactionPassword = e
		// productDAO.value.amount = amountPage.value
		uni.showLoading({
			mask: true
		})
		const result = await userProductInvest(productDAO.value)
		uni.hideLoading()
		if (result.code == 200) {
			uni.showModal({
				title: "提示",
				content: "操作成功",
				showCancel: false,
				success: () => {
					uni.navigateBack()
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.model-fix {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .5);

		.content {
			width: 750rpx;
			height: 783rpx;
			background: #FFFFFF;
			box-shadow: 0px -23rpx 67rpx 0px rgba(60, 66, 78, 0.06);
			border-radius: 23rpx 23rpx 0px 0px;
			position: absolute;
			bottom: 0;
			left: 0;

			.top {
				display: flex;
				justify-content: flex-end;
				padding: 38rpx;

				image {
					display: block;
					width: 38rpx;
					height: 38rpx;
				}
			}
		}

		.sum-amount {
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
			margin: 38rpx;
			padding-top: 38rpx;
			border-top: 1rpx solid #eee;

			text {
				color: #313646;
				font-size: 28rpx;
			}
		}

		.xy {
			display: flex;
			align-items: center;

			margin-left: 38rpx;

			image {
				display: block;
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}

			text {
				font-size: 24rpx;
				color: #8C8E95;
			}
		}

		.btn2 {
			width: 458rpx;
			height: 92rpx;
			background: linear-gradient(214deg, #4160FF 0%, #6B53FE 100%);
			box-shadow: 0px 15rpx 38rpx 0px rgba(89, 96, 255, 0.28);
			border-radius: 15rpx;
			display: block;
			font-size: 28rpx;
			font-weight: bold;
			line-height: 92rpx;
			color: #fff;
			margin-top: 40rpx;
		}
	}

	.phl {
		color: #999;
		font-size: 28rpx;
	}

	.inp {
		width: 300rpx;
		height: 100rpx;
		background: #F6F6FF;
		border-radius: 71rpx;
		display: block;
		font-size: 32rpx;
		padding: 0 77rpx;
		font-weight: bold;
	}

	.procress-text {
		width: 596rpx;

		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;

		text {
			color: #313646;
			font-size: 24rpx;
		}
	}

	.procress {
		display: block;
		width: 596rpx;
		height: 27rpx;
		margin-top: 30rpx;
	}

	.settlement {
		padding: 0 38rpx 30rpx;
		// height: 285rpx;
		background: #FFFFFF;
		box-shadow: 0px -23rpx 67rpx 0px rgba(60, 66, 78, 0.06);
		border-radius: 23rpx 23rpx 0 0;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		.pay {
			display: flex;
			align-items: center;
			margin-top: 38rpx;
			justify-content: space-between;


			.service {
				width: 69rpx;
				height: 69rpx;
				background: rgba(204, 212, 231, 0.2);
				border-radius: 23rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					display: block;
					width: 38rpx;
					height: 38rpx;
				}

			}

			.btn {
				width: 458rpx;
				height: 92rpx;
				background: linear-gradient(214deg, #4160FF 0%, #6B53FE 100%);
				box-shadow: 0px 15rpx 38rpx 0px rgba(89, 96, 255, 0.28);
				border-radius: 15rpx;
				display: block;
				font-size: 28rpx;
				font-weight: bold;
				line-height: 92rpx;
				color: #fff;
			}
		}


	}

	.model-product {
		padding: 0 38rpx;
		background: #FFFFFF;
		border-radius: 23rpx;


		.footer-text {
			color: #A3A5AA;
			font-size: 24rpx;
			display: block;
		}

		.footer {
			display: flex;
			align-items: center;
			margin-top: 30rpx;

			image {
				display: block;
				width: 30rpx;
				height: 30rpx;
				margin-right: 6rpx;
			}

			text {
				color: #A3A5AA;
				font-size: 24rpx;
			}
		}

		.center {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.sum {
				display: flex;
				align-items: center;
				justify-content: space-between;

				image {
					display: block;
					width: 38rpx;
					height: 38rpx;
				}

				text {
					display: block;
					color: #313646;
					font-size: 28rpx;
					font-weight: bold;
					width: 90rpx;
					text-align: center;
				}
			}
		}

		.title {
			color: #313646;
			font-size: 28rpx;
			font-weight: 600;
			display: block;
		}

		.xiyi {
			display: block;
			color: #999;
			font-size: 24rpx;
			line-height: 50rpx;
			margin-top: 28rpx;
		}

		.price {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx 0;

			text {
				color: #A3A5AA;
				font-size: 24rpx;
			}

			.amount {
				color: #313646;
				font-size: 46rpx;
				font-weight: bold;
			}
		}
	}

	.product {
		padding: 38rpx;
		background: #FFFFFF;
		border-radius: 23rpx;
		margin-top: 30rpx;
		margin-bottom: 23rpx;

		.pic-box {
			border-top: 1rpx solid #eee;
			display: block;
			margin-top: 30rpx;
			padding: 30rpx 0;

			image {
				display: block;
				width: 596rpx;
				margin: 0 auto;
			}
		}

		.tips {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;

			text {
				color: #989AA2;
				font-size: 23rpx;
			}

			.line {
				display: block;
				width: 2rpx;
				height: 28rpx;
				background: #989AA2;
				margin: 0 20rpx;
			}
		}

		.desc {
			width: 556rpx;

			background: #F6F7F9;
			border-radius: 15rpx;
			color: #A3A5AA;
			font-size: 24rpx;
			display: block;
			line-height: 40rpx;
			padding: 20rpx;
			margin-top: 20rpx;
		}

		.header {
			display: flex;
			align-items: flex-start;


			.left {
				margin-right: 77rpx;

				view {
					.amount {
						color: #FF2F22;
						font-size: 65rpx;
						font-weight: 800;
					}

					.unit {
						color: #FF2F22;
						font-size: 28rpx;
					}
				}

				>text {
					color: #A3A5AA;
					font-size: 24rpx;
					display: block;
					margin-top: 15rpx;
				}
			}

			.right {
				margin-top: 10rpx;

				.product-title {
					display: block;
					color: #313646;
					font-weight: bold;
					font-size: 31rpx;

					margin-bottom: 25rpx;
				}

				.note {
					width: 232rpx;
					height: 42rpx;
					background: #FEF6E9;
					border-radius: 8rpx;
					color: #FF984D;
					font-size: 23rpx;
					line-height: 42rpx;
					text-align: center;
					display: block;


				}

			}
		}
	}

	page {
		background: #F6F7F9;
	}

	.wrap {
		padding: 30rpx 38rpx 0;
		background: red;
		background: #F6F7F9;
		min-height: 100vh;
	}

	.produce-header {
		display: flex;
		align-items: center;

		>image {
			display: block;
			width: 38rpx;
			height: 38rpx;
			margin-right: 12rpx;
		}
	}

	.product-name {
		color: #313646;
		font-size: 38rpx;
		font-weight: bold;
		display: block;

	}
</style>